<template>
  <div style="background-color: #fff; padding: 20px 50px">
    <div>
      <!-- 页面内容 -->
      <base-search :searchConfig="searchConfig" @search="handleSearch" />
    </div>
    <div>
      <!-- :start-index="startIndex" -->

      <table-wrapper :columns="columns" :mock-data="mockData" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import BaseSearch from "./BaseSearch.vue";
import TableWrapper from "./TableWrapper.vue";
import { SearchItem, TableColumn } from "./types";

export default defineComponent({
  components: {
    BaseSearch,
    TableWrapper
  },
  setup() {
    const searchConfig = ref<SearchItem[]>([
      { type: "input", label: "商品名称", prop: "name" },
      { type: "select", label: "商品分类", prop: "category", options: [] },
      { type: "select", label: "商品分类", prop: "category", options: [] },
      { type: "daterange", label: "创建时间", prop: "createTime" },
      { type: "daterange", label: "时间", prop: "createTime" }
    ]);

    const handleSearch = (data: Record<string, any>) => {
      console.log("搜索数据：", data);
      // 执行搜索操作
    };
    const columns = ref<TableColumn[]>([
      { prop: "name", label: "名称" },
      { prop: "age", label: "年龄" }
      // ...其他列
    ]);
    const startIndex = 1; // 设置序号起始值为10
    const mockData = ref<any[]>([
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "张三", age: 30 },
      { name: "李四", age: 24 }
      // ...其他数据
    ]);

    return {
      searchConfig,
      handleSearch,
      columns,
      mockData
      // startIndex
    };
  }
});
</script>
